<template>
	<div class="header">
		<div class="content-wrapper">
			<!--商家头像-->
			<div class="avatar">
				<img width="64" height="64" :src="seller.avatar"/>
			</div>
			<div class="content">
				<!--店名-->
				<div class="title">
					<span class="brand"></span>
					<span class="name">{{seller.name}}</span>
				</div>
				<!--外卖服务-->
				<div class="description">{{seller.description}}/{{seller.deliveryTime}}分钟送达</div>
				<!--活动-->
				<div v-if="seller.supports" class="support" @click="showDetail">
					<span class="icon"></span>
					<span class="text">{{seller.supports[0].description}}</span>
					<div class="support-count" v-if="seller.supports">
						<span class="count">{{seller.supports.length}}个</span>
						<i class="count-arr arrow"></i>
					</div> 	
				</div>
			</div> 
		</div>
		<div class="bulletin-wrapper" @click="showDetail">
			<span class="bulletin-title"></span><span class="bulletin-text">{{seller.bulletin}}</span>
			<i class="bulletin-arr arrow"></i>
		</div>
		<div class="background">
			<img :src="seller.avatar" width="100%" height="100%"/>
		</div>
		<!--浮层-->
		<transition name="fade">
			<div class="detail" v-show="detailShow">
				<div class="detail-wrapper clearfix">
					<div class="detail-main">
						<h1 class="name">{{seller.name}}</h1>
						<div class="star-wrapper">
							<!--评价星星组件-->
							<star :size='48' :score='seller.score'></star>
						</div>
						<div class="bt">
							<div class="line"></div>
							<div class="text">优惠信息</div>
							<div class="line"></div>
						</div>
						<ul v-if="seller.supports" class="supp">
							<li class="supp-item" v-for="(item,index) in seller.supports">
								<span class='icon' :class="classMap[seller.supports[index].type]"></span>
								<span class="text">{{seller.supports[index].description}}</span>
							</li>
						</ul>
						<div class="bt">
							<div class="line"></div>
							<div class="text">商家公告</div>
							<div class="line"></div>
						</div>
						<div class="bulletin">
							<p class="content">
								{{seller.bulletin}}
							</p>
						</div>
					</div>
				</div>  
				<div class="detail-close" v-on:click="closeDetail">
					<i class="icon-close">×</i>
				</div>
			</div>
		</transition>
	</div>
</template>

<script>
	import star from '../star/star'
	
	export default{
		props:{
			seller:{}
		},
		data(){
			return {
				detailShow:false
//				classMap:[]
			}
		},
		methods:{
			showDetail:function(){
				this.detailShow = true
			},
			
			closeDetail:function(){
				this.detailShow = false
			}
		},
		created(){
			this.classMap = ['decrease','discount','special','invoice','guarantee'];
		},
		components:{
			star
		}
	}
</script>

<style>
	.header{
		position: relative;
		color: #fff;
		background: rgba(7,17,27,0.5);
		overflow: hidden;
	}
	.content-wrapper{
		position: relative;
		padding:24px 12px 18px 24px;
		font-size: 0;
	}
	.avatar{
		display: inline-block;
	}
	.avatar img{
		border-radius: 2px;
	}
	.content{
		display: inline-block;
		margin-left: 16px;
		font-size: 14px;
	}
	.title{ 
		margin:2px 0 8px 0;
	}
	.brand{
		display: inline-block;
		vertical-align: top;
		width: 30px;
		height: 18px;
		background: url(brand@2x.png) no-repeat;
		background-size: 30px 18px;
	}
	.name{
		margin-left: 6px;
		font-size: 16px;
		line-height: 18px;
		font-weight: bold;
	}
	.description{
		margin-bottom: 10px;
		line-height: 12px;
		font-size: 12px;
	}
	.support .icon{
		display: inline-block;
		vertical-align: top;
		width: 12px;
		height: 12px;
		margin-right: 4px;
		background: url(decrease_1@2x.png) no-repeat;
		background-size: 12px 12px;
	}
	.support .text{
		line-height: 12px;
		font-size: 12px;
	}
	.support-count{
		position: absolute;
		right:12px;
		bottom: 14px;
		padding: 0 8px;
		height: 24px;
		line-height: 24px;
		border-radius: 14px;
		background: rgba(0,0,0,0.2);
		text-align: center;
	}
	.count{
		font-size: 12px;
	}
	.arrow{
		display: inline-block;
		width: 5px;
		height: 5px;
		border-top: 1px solid #fff;
		border-right: 1px solid #fff;
		transform: rotate(45deg);
	}
	.count-arr{
		margin: 1px 2px 0;
		margin-bottom: 1px;		
	}
	.bulletin-wrapper{
		position: relative;
		height: 28px;
		line-height: 28px;
		padding: 0 22px 0 12px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		background: rgba(7,17,27,0.2);
	}
	.bulletin-title{
		display: inline-block;
		vertical-align: top;
		margin-top: 8px;
		width: 22px;
		height: 12px;
		background: url(bulletin@2x.png) no-repeat;
		background-size: 22px 12px;
	}
	.bulletin-text{
		vertical-align: top;
		font-size: 10px;
		margin: 0 4px;
	}
	.bulletin-arr{
		position: absolute;
		font-size: 12px;
		right: 12px;
		top: 12px;
	}
	.background{
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
		width: 100%;
		height: 100%;
		filter: blur(10px);/*滤镜*/
	}
	.detail{
		position: fixed;
		top: 0;
		left: 0;
		z-index: 100;
		width: 100%;
		height: 100%;
		overflow: auto;
		background: rgba(7,17,27,0.8);
	}
	.fade-enter-active,.fade-leave-active{
		transition: opacity 0.5s;
	}
	.fade-enter,.fade-leave{
		opacity: 0;
	}
	.detail-wrapper{
		min-height: 100%;
		width: 100%;
	} 
	.detail-main{
		margin-top: 64px;
		padding-bottom: 64px;
	}
	.detail-close{
		position: relative; 
		width: 34px;
		height: 34px;
		margin: -64px auto 0 auto;
		clear: both;
		font-size: 32px;
	}
	.icon-close{
		display: block;
		width: 30px;
		height: 30px;
		border: 2px solid #fff;
		text-align: center;
		font-size: 36px;
		line-height: 30px;
		color: #fff;
		border-radius: 50%;
	}
	.name{
		line-height: 16px;
		text-align: center;
		font-size: 16px;
		font-weight: 700;
	}
	.star-wrapper{
		margin-top: 18px;
		padding: 2px 0;
		text-align: center;
	}
	.bt{
		display: flex;
		width: 80%;
		margin: 28px auto 24px;
	}
	.line{
		flex: 1;
		position: relative;
		top: -6px;
		border-bottom: 1px solid rgba(255,255,255,0.2);
	}
	.bt .text{
		padding: 0 12px;
		font-size: 14px;
		font-weight: 700;
	} 
	.supp{
		width: 80%;
		margin: 0 auto;
	}
	.supp-item{
		padding: 0 12px;
		margin-bottom: 12px;
		font-size: 0;
	}
	.supp-item:last-child{
		margin-bottom: 0;
	}
	.supp-item .icon{
		display: inline-block;
		width: 16px;
		height: 16px;
		vertical-align: top;
		margin-right: 6px;
	}
	.supp-item .decrease{
		background: url(decrease_2@2x.png) no-repeat;
		background-size: 16px 16px;
	}
	.supp-item .discount{
		background: url(discount_2@2x.png) no-repeat;
		background-size: 16px 16px;
	}	
	.supp-item .guarantee{
		background: url(guarantee_2@2x.png) no-repeat;
		background-size: 16px 16px;
	}	
	.supp-item .invoice{
		background: url(invoice_2@2x.png) no-repeat;
		background-size: 16px 16px;
	}	
	.supp-item .special{
		background: url(special_2@2x.png) no-repeat;
		background-size: 16px 16px;
	}	
	.supp-item .text{
		 line-height: 16px;
		 font-size: 12px;
	}
	.bulletin{
		width: 80%;
		margin: 0 auto;
	}
	.bulletin .content{
		padding: 0 12px;
		line-height: 24px;
		font-size: 12px;
	}
</style>